<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(31.298987,121.519572);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    //add marker logo!!!
    marker = new google.maps.Marker({
    	position:latlng,
    	title:"尚器设计",
    	map:map,
    	icon2:"http://images.apple.com/retail/images/icons/letter_a-black.png",
    	icon:"img/logo.png",
    	animation: google.maps.Animation.DROP
    	});
    google.maps.event.addListener(marker,'click',toggleBounce);
    
    info = new google.maps.InfoWindow({
    	content:"<p>Chinge Design </p><p>3F.,Room 14,#200 East Guoding Rd.,Yangpu,Shanghai,China</p>",
    	position:latlng
    });
    info.open();
  }
  
  //marker bounce
  function toggleBounce()
  {
  	//open infoWindow
  	info.open(map);
  	if(marker.getAnimation() != null){
  		marker.setAnimation(null);
  	} else {
  		marker.setAnimation(google.maps.Animation.BOUNCE)
  	}
  }
  

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>